import { Image } from 'antd-mobile';
import classNames from 'classnames';
import styles from './ArticleItem.module.scss';

import dayjs from 'dayjs';
// 相对时间插件
import relativeTime from 'dayjs/plugin/relativeTime';
// 国际化 - 中文
import 'dayjs/locale/zh-cn';
// 启用相对时间
dayjs.extend(relativeTime);
// 启用中文
dayjs.locale('zh-cn');

type Props = {
  /**
   * 0 表示无图
   * 1 表示单图
   * 3 表示三图
   */
  type: number;
  title: string;
  aut_name: string;
  comm_count: number;
  pubdate: string;
  images: string[];
};

export const ArticleItem = (props: Props) => {
  return (
    <div className={styles.root}>
      <div
        className={classNames(
          'article-content',
          props.type === 3 && 't3',
          props.type === 0 && 'none-mt'
        )}
      >
        <h3>{props.title}</h3>
        {props.type !== 0 && (
          <div className="article-imgs">
            {props.images.map((item, index) => (
              <div key={index} className="article-img-wrapper">
                {/* <img src={item} /> */}
                {/* 使用ant mobile Image 配置懒加载 */}
                <Image
                  src={item}
                  lazy={true}
                  fit={'scale-down'}
                  width={110}
                  height={75}
                />
              </div>
            ))}
          </div>
        )}
      </div>
      <div
        className={classNames('article-info', props.type === 0 && 'none-mt')}
      >
        <span>{props.aut_name}</span>
        <span>{props.comm_count} 评论</span>
        <span>{dayjs().from(props.pubdate)}</span>
        {/* 类似举报投诉功能 */}
        {/* <span className="close">
          <svg className="icon">
            <use xlinkHref={'#iconbtn_essay_close'}></use>
          </svg>
        </span> */}
      </div>
    </div>
  );
};
